<template>
  <!-- 展示全部订单的结构 -->
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>挂号订单</span>
      </div>
    </template>
    <!--提供用户选择的下拉菜单-->
    <el-form :model="searchParam">
      <el-form-item label="就诊人">
        <el-select placeholder="请选择就诊人" v-model="searchParam.patientId" @change="changeUser">
          <el-option label="请选择全部就诊人" value=""></el-option>
          <el-option
              v-for="item in orderStore.patient"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单状态">
        <el-select placeholder="请选择订单状态" v-model="searchParam.orderStatus" @change="changeOrderState">
          <el-option label="全部订单" value=""></el-option>
          <el-option v-for="(item,index) in orderStore.orderStatus" :key="index" :label="item.comment"
                     :value="item.status"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <!-- 表格展示订单的数据 -->
    <el-table border style="margin: 10px 0px" :data="orderStore.orderList.records">
      <el-table-column label="就诊时间" prop="reserveDate"></el-table-column>
      <el-table-column label="医院" prop="hosname"></el-table-column>
      <el-table-column label="科室" prop="depname"></el-table-column>
      <el-table-column label="医生" prop="title"></el-table-column>
      <el-table-column label="服务费" prop="amount"></el-table-column>
      <el-table-column label="就诊人" prop="patientName"></el-table-column>
      <el-table-column label="订单状态" prop="param.orderStatusString"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="getOrderDetail(scope.row)">详情
          </el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!--    分页-->
    <el-pagination
        v-model:current-page="pageNo"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="orderStore.total"
        @size-change="currentPageChange"
        @current-change="sizeChange"
    />
  </el-card>

</template>

<script lang="ts">
export default {
  name: "order"
}
</script>
<script setup lang="ts">
//获取就诊人信息
import useOrderStore from "@/store/order";
import {reactive, ref} from "vue";
import {getOrderDetailInfo} from "@/api/order";
import router from "@/router";

const orderStore = useOrderStore();
orderStore.getPatientData()
orderStore.getOrderStatusData()

const pageNo = ref(1)
const pageSize = ref(10)
orderStore.getOrderListData(pageNo.value, pageSize.value)

const searchParam = reactive({
  patientId: "",
  orderStatus: ""
})


const currentPageChange = () => {
  orderStore.getOrderListData(pageNo.value, pageSize.value, searchParam.patientId, searchParam.patientId, searchParam.orderStatus)
}

const sizeChange = () => {
  orderStore.getOrderListData(pageNo.value, pageSize.value, searchParam.patientId, searchParam.patientId, searchParam.orderStatus)
}


const changeUser = () => {
  //根据就诊人搜索
  orderStore.getOrderListData(pageNo.value, pageSize.value, searchParam.patientId, searchParam.orderStatus)
}

const changeOrderState = () => {
  orderStore.getOrderListData(pageNo.value, pageSize.value, searchParam.patientId, searchParam.orderStatus)
}


//获取订单详情
const getOrderDetail = (row: any) => {
  router.push({
    path: "/user/order",
    query: {
      orderId: row.id
    }
  })
}


</script>

<style scoped>
.el-form {
  display: flex;
  justify-content: space-around;

  .el-form-item {
    width: 40%;
  }
}

</style>
